<template>
    <view>
        <uni-nav-bar fixed left-icon="back" title="会员中心" class="bar"></uni-nav-bar>

        <view class="v_img">
            <image class="logo" src="/static/image/icon/y8.jpg"></image>
        </view>

        <swiper @change="swiperChange" previous-margin="50px" next-margin="50px"
                class="swiper":indicator-dots="false"
                :autoplay="false" :interval="3000" :duration="1000" :current="bigIdx">

            <template v-for="(vip, i) in vips">
                <swiper-item :key="'vip_'+i">
                    <view :class="['swiper-item',bigIdx === i ? 'big' : 'small']"
                          :style="{background:vip.bg,'box-shadow':vip.shadow}">
                        <image class="img" src="/static/image/icon_vip.png"></image>
                        <text class="title">{{vip.title}}</text>
                        <text class="sub_title">{{vip.subTitle}}</text>
                    </view>
                </swiper-item>
            </template>

        </swiper>

        <view class="main-title">
            <text>会员充值</text>
        </view>

        <scroll-view scroll-x>
            <view class="recharge">
                <view class="recharge-item" :class="current == index ? 'recharge-item-active': ''"
                      v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
                    <view class="recharge-tag" v-if="item.showTag">
                        <text class="recharge-tag-text">限时特价 送豪礼</text>
                    </view>
                    <text class="recharge-item-duration">{{ item.duration }}</text>
                    <view class="recharge-item-price">
                        <text class="rmb">￥</text>
                        <text class="recharge-item-price-text">{{ item.price }}</text>
                    </view>
                    <text class="recharge-item-des" v-for="(desItem, desIndex) in item.des" :key="desIndex">{{ desItem }}</text>
                </view>
            </view>
        </scroll-view>

        <view class="button update" hover-class="hover" @click="updateNow">
            <text class="button-text">立即升级</text>
        </view>

    </view>
</template>

<script>
    import uniIconfont from '@/components/uni-iconfont/index'

    export default {
        name: "members.vue",
        components: {
            uniIconfont
        },
        data() {
            return {
                current: 0,
                bigIdx: 0,
                rechargeOptions: [
                    {duration: '12个月', price: 88,
                        des: ['到期自动续费', '可随时关闭'],
                        showTag: true
                    },
                    {duration: '1个月', price: 15,
                        des: ['联合月卡'],
                        showTag: false
                    },
                    // {duration: '连续包月', price: 10,
                    //     des: ['到期自动续费', '可随时关闭'],
                    //     showTag: false
                    // },
                    // {duration: '连续包年', price: 70,
                    //     des: ['到期自动续费', '可随时关闭'],
                    //     showTag: true
                    // }
                ],
                vips: [
                    {
                        bg: 'linear-gradient(94deg,rgba(150,147,168,1),rgba(150,147,164,1))',
                        shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
                        title: 'VIP会员',
                        subTitle: '距离下一等级还差888积分'
                    }, {
                        bg: 'linear-gradient(94deg,rgba(192,160,105,1),rgba(233,213,172,1))',
                        shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
                        title: '年卡会员',
                        subTitle: '升级至尊会员享额外特权'
                    }]
            }
        },
        onLoad() {},
        methods: {
            //  升级充值
            updateNow() {},
            swiperChange(e) {
                this.bigIdx = e.detail.current
            },
            rechargeChange(index) {
                this.current = index
            },
            back(){
                uni.navigateBack({delta: 1})
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bar {
        background: #1C1C1C;
        color: #fff;
    }
    .update {
        margin: 35rpx 30rpx 20rpx 30rpx;
    }
    .main-title {
        padding: 30rpx 30rpx;
        font-size: 34rpx;
        color: #1C1C1C;
    }
    .button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 85rpx;
        border-radius: 50rpx;
        background-image: linear-gradient(#EFCF9E, #E4BF85);

        &-text {
            font-size: 30rpx;
            color: #1C1C1C;
        }
    }
    .recharge {
        position: relative;
        margin-bottom: 35rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        &-tag {
            position: absolute;
            top: -2rpx;
            left: -2rpx;
            width: 170rpx;
            height: 36rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background-image: url('~@/static/image/tag.png');
            background-size: 100%;

            &-text {
                font-size: 20rpx;
                color: #FFFFFF;
                text-align: center;
            }
        }

        &-item {
            position: relative;
            padding: 40rpx 0;
            margin-left: 15rpx;
            width: 200rpx;
            /*height: 230rpx;*/
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: solid 2rpx #F2F2F3;
            border-radius: 12rpx;

            &-active {
                border-color: #EDD2A9;
                background-color: #FBF1E5;
            }

            &-duration {
                margin-bottom: 30rpx;
                font-size: 26rpx;
                color: #1C1C1C;
            }

            &-price {
                margin-bottom: 20rpx;
                display: flex;
                flex-direction: row;
                align-items: baseline;

                &-text {
                    font-size: 48rpx;
                    color: #E3BE83;
                }
            }

            &-des {
                font-size: 22rpx;
                color: #A5A3A2;
            }
        }
    }
    .rmb {
        font-size: 26rpx;
        color: #E3BE83;
    }
    .v_img {
        width: 100%;
        text-align: center;
        .logo {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    }

    .swiper {
        width: 100%;
        margin-top: 10px;

        .swiper-item {
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            margin-right: 10px;
        }

        .big {
            margin-top: 0;

            .img {
                margin-top: 15px;
                width: 40px;
                height: 40px;
            }

            .title {
                font-size: 25px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 41px;
            }

            .sub_title {
                font-size: 11px;
                font-weight: 300;
                color: rgba(255, 255, 255, 1);
                line-height: 41px;
            }
        }

        .small {
            margin-top: 14px;
            height: 75%;

            // transition: all 0.3s;
            .img {
                margin-top: 5px;
                width: 25px;
                height: 25px;
            }

            .title {
                font-size: 15px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 31px;
            }

            .sub_title {
                font-size: 7px;
                font-weight: 300;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
</style>